<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>观察者模式</title>
    </head>
    <body>
        <script>
            // 发布者(目标)
            class Dep {
                constructor() {
                    // 记录所有的观察者
                    this.subs = [];
                }
                // 添加观察者
                addSub(sub) {
                    if (sub && sub.update) {
                        this.subs.push(sub);
                    }
                }
                // 调用观察者update方法
                notify() {
                    this.subs.forEach((sub) => {
                        sub.update();
                    });
                }
            }
            // 订阅者(观察者)
            class Watcher {
                update() {
                    console.log("update");
                }
            }
            // 创建发布者
            let dep = new Dep();
            // 创建订阅者
            let watcher = new Watcher();

            // 添加订阅者
            dep.addSub(watcher);
            // 通知所有订阅者,调用订阅者update方法
            dep.notify();
        </script>
    </body>
</html>
